import React, { useState } from 'react'
import PropTypes from 'prop-types'
// import { Button } from 'antd'
import { FileTextFilled, QrcodeOutlined } from '@ant-design/icons'
// import { modifyStatusList } from '@js/config'
import { CaseContext } from '../context'
import style from './CaseNo.module.less'
// import TypeTagList from './TypeTagList'
// import moment from 'moment'
import { QRCodeSVG } from 'qrcode.react'
import Modal from 'antd/lib/modal/Modal'

// 案号标题
function CaseNoTitle ({ caseDetail: d }) {
  const [v, setV] = useState(false)
  if (!d) {
    return <span />
  }
  const otherNo = d.counter_caseno_desc
  return (
    <span className={style['case-no']}>
      <Modal open={v} title='二维码' footer={false} onCancel={() => setV(false)}>
        <QRCodeSVG value={d.id} size='400' style={{ width: '100%' }} />
      </Modal>
      {d.caseno_desc || d.acceptno_desc || '收案号 无'}
      <span className={style['other-case-no']}>{otherNo ? `/${otherNo}` : ''}</span>
      <QrcodeOutlined onClick={() => { setV(true) }} />
    </span>
  )
}

// 修改按钮
// function ModifyBtn ({ caseDetail: d, fullInfo }) {
//   if (!d) {
//     return <span />
//   }
//   const noOld = d.accept_datetime * 1000 > moment('2022-03-13 00:00:00')
//   let type = noOld ? '查看详情' : '修改信息'
//   if (!d.cause_action) {
//     type = '完善信息'
//   } else if (modifyStatusList.indexOf(d.status) !== -1) {
//     type = '修改信息'
//   }
//   return (
//     <span className={style['modify-btn-line']}>
//       <Button type='primary' ghost onClick={() => fullInfo(type)}>{type}</Button>
//     </span>
//   )
// }

function Main ({ caseDetail, fullInfo }) {
  return (
    <CaseContext.Consumer>
      {({ caseDetail }) => {
        return (
          <div className={style.container}>
            <span className={style['case-icon']}><FileTextFilled /></span>
            <CaseNoTitle caseDetail={caseDetail} />
            {/* <TypeTagList caseDetail={caseDetail} /> */}
            {/* <ModifyBtn caseDetail={caseDetail} fullInfo={fullInfo} /> */}
          </div>
        )
      }}
    </CaseContext.Consumer>
  )
}

Main.propTypes = {
  fullInfo: PropTypes.func,
  caseDetail: PropTypes.object
}

Main.defaultProps = {
  fullInfo: () => {},
  caseDetail: null
}

export default Main
